<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style-type: none;}
    body,html{ width: 100vw; height: 100vh; position: relative;}
    #main{ width: 800px; margin: 50px auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;}
    #main .ct{ width: 100%; height: 300px; background: #ccc;}
    #main .ct img{ object-fit: cover; width: 100%; height: 100%;}
    #main .cteee{ }
</style>
<body>
    <section id="main">
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
        <div class="ct"><img src="2018.jpg" data-src="pexels-photo-17975892.jpeg" alt=""></div>
    </section>
    <script>
        document.addEventListener('scroll',function(){
            loadimg();
        })
        var images = document.querySelectorAll('.ct img');
        function loadimg(){
            images.forEach(function(img){
                var src = img.dataset.src;
                var rect = img.getBoundingClientRect();
                // if(rect.top<window.innerHeight){
                //     img.src = src;
                // })
                //判断是否在视口范围内
                if(rect.top>0 && rect.bottom<window.innerHeight && rect.left>0 && rect.right<window.innerWidth){
                    img.parentNode.classList.add('active');
                    img.src = src;
                }else{
                    img.parentNode.classList.remove('active');
                }
            })
        }
        loadimg();


        let creatimg = document.createElement('div')
        creatimg.classList.add('cteee');
        let cimg = document.createElement('img');
        cimg.src = '2018.jpg';
        cimg.style = 'position:fixed; left:20px; top:20px; width:200px; height:600px; transition: all 2s;';
        creatimg.appendChild(cimg);
        document.body.appendChild(creatimg);




        
    </script>
</body>
</html>